<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
<!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">-->
    <link rel="stylesheet" href="../static/css/animate.css">
    <link rel="stylesheet" href="../static/css/me.css">
    <link rel="stylesheet" href="../static/css/background.css">
</head>
<body>
<!--导航-->
<nav id="m-nav" class="ui top fixed hidden menu">
    <!--流动导航组件-->
    <div class="m-container-s1">
        <div class="ui secondary stackable menu">
            <div class="item">
                <h2 class="ui header">Ended</h2>
            </div>&nbsp;
            <a href="#" th:href="@{/}" class="m-item active item m-mobile-hide">
                <i class="home icon"></i>首页</a>
            <a href="#" th:href="@{/home}" class="m-item item m-mobile-hide">
                <i class="anchor icon"></i>博客</a>
            <a href="#" th:href="@{/types/-1}" class="m-item item m-mobile-hide">
                <i class="idea icon"></i>分类</a>
            <a href="#" th:href="@{/tags/-1}" class="m-item item m-mobile-hide">
                <i class="tags icon"></i>标签</a>
            <a href="#" th:href="@{/archives}" class="m-item item m-mobile-hide">
                <i class="folder icon"></i>归档</a>
            <a href="#" th:href="@{/about}" class="m-item item m-mobile-hide">
                <i class="info icon"></i>关于</a>
            <div class="m-item item m-mobile-hide">
                <form name="search" action="#" th:action="@{/search}" method="post">
                    <div class="ui right aligned category search">
                        <div class="ui icon input">
                            <input class="prompt" name="query" type="text" th:value="${query}" style="color: #6495ed"
                                   placeholder="搜索">
                            <i onclick="document.forms['search'].submit()" class="search icon"></i>
                        </div>
                        <div class="results"></div>
                    </div>
                </form>
            </div>
            <div class="m-item item m-mobile-hide">
                <a class="ui basic vertical animated circular button" href="#" target="_blank" th:href="@{/admin/}"
                   tabindex="0">
                    <div class="hidden content">登录</div>
                    <div class="visible content">
                        <i class="ceter user outline icon"></i>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle basic icon button m-top-right m-mobile-show m-bg">
        <i class="sidebar icon"></i>
    </a>
</nav>

<div>
    <div class="image">
        <img src="../static/images/indexbg.jpg" th:src="@{/images/indexbg.jpg}" class="ui image"
             style="position: fixed!important; z-index: -10 !important;" alt="">
        <div class="m-container-small">
            <div class="ui center aligned segment m-bg m-padded-tb-maximum">
                <div class="ui red header m-font-maxsize">
                    Alien
                </div>
                <br>
                <a href="#" th:href="@{/home}" class="ui inverted basic button">EnterBlog</a>
                <br>
                <div id="toNext-button" class="ui inverted circular large icon button m-bottom-center">
                    <i class="red chevron down icon"></i>
                </div>
            </div>
        </div>
    </div>
    <div id="nav-hide"></div>
    <div class="m-background-l1">
        <div class="m-padded-tb-m1 m-container-s1">
            <br><br>
            <div class="notice">
                <div class="ui header">
                    <i class="volume up icon"></i>
                    Welcome to My Blog! where there is a will there is a way!
                </div>
            </div>
            <br><br><br>
            <!--container容器，自动匹配合适的大小效果-->
            <div class="ui container">
                <!--分割线-->
                <div class="ui horizontal divider m-margin-tb-large">
                    <h3 class="ui header"><i class="paper plane outline icon"></i>Concentrate</h3>
                </div>
                <!--推荐文章-->
                <div class="ui special stackable three cards  m-margin-tb-large">
                    <div class="card" th:each="blog : ${stickyBlogs}">
                        <div class="blurring dimmable image">
                            <div class="ui dimmer">
                                <div class="content">
                                    <div class="center">
                                        <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" class="ui inverted button" th:text="${blog.title}">博客</a>
                                    </div>
                                </div>
                            </div>
                            <img src="../static/images/plug/head.jpg" th:src="@{${blog.firstPicture}}"
                                 style="width: 100% !important;height: 200px !important;">
                        </div>
                    </div>
                </div>
            </div>
            <br><br>

        </div>
        <div class="m-container-b1">
            <!--热门文章-->
            <div class="ui middle aligned grid">
                <div class="one wide column">
                    <a href="#" th:href="@{/(page=${page.number}-1)}"
                       th:unless="${page.first}" class="ui large inverted grey circular icon button">
                        <i class="angle grey left icon"></i>
                    </a>
                </div>
                <div class="fourteen wide column">
                    <!--分割线-->
                    <div class="ui horizontal divider m-margin-tb-large">
                        <h3 class="ui header"><i class="leaf icon"></i>Discovery</h3>
                    </div>
                    <div class="ui link three stackable cards m-opacity-small m-margin-tb-large">
                        <div class="card" th:each="blog : ${page.content}">
                            <div class="image">
                                <img src="https://picsum.photos/id/1015/700/500" th:src="@{${blog.firstPicture}}"
                                     style="width: 100% !important;height: 250px!important;">
                            </div>
                            <div class="content">
                                <div class="ui header">
                                    <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" class="m-black" target="_blank" th:text="${blog.title}">个人博客</a>
                                </div>
                                <div class="meta">
                                    <span><i class="user icon"></i></span>
                                    <span class="header m-text-t1" th:text="${blog.user.nickname}">颜云华</span>
                                </div>
                                <div class="description" th:text="|${blog.description}......|"
                                     style="display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden">
                                    Matthew is an interior designer living in New York.
                                </div>
                            </div>
                            <div class="extra content">
                                <span class="right floated" th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2020-12-12 </span>
                                <span><i class="paper plane outline icon"></i>
                            <span th:text="${blog.flag}">原创</span>
                        </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="one wide column">
                    <a href="#" th:href="@{/(page=${page.number}+1)}"
                       th:unless="${page.last}" class="ui large inverted grey circular icon button">
                        <i class="angle grey right icon"></i>
                    </a>
                </div>
            </div>
        </div>

        <br><br><br>

        <footer th:replace="_fragments :: footer"></footer>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>-->
<script src="js/semantic.min.js"></script>
<script src="css/semantic.min.css"></script>

<script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
<script src="../static/lib/waypoints/jquery.waypoints.min.js"></script>

<!--导航的手机端按钮的响应页面-->
<script th:inline="javascript">
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide')
    });
    $('#linkButton').popup({
        popup: $('.linkQR.popup'),
        on: 'click',
        position: 'bottom center'
    });
    //直达content方法
    $('#toNext-button').click(function () {
        $(window).scrollTo("65%", 500);
    });

    //index卡片
    $('.special.cards .image').dimmer({
        on: 'hover'
    });

    var waypoint = new Waypoint({
        element: document.getElementById('nav-hide'),
        handler: function (direction) {
            if (direction == 'down') {
                $('#m-nav').show();
                $('#m-nav').addClass('animate__animated animate__backInLeft');
                console.log('Scrolled to show!')
            } else {
                // $('#m-nav').addClass('animated fadeOut');
                $('#m-nav').hide();
                console.log('Scrolled to hide!')
            }
            console.log('Scrolled to waypoint!' + direction)
        }
    })

</script>

</body>
</html>